<template>
  <div class="movie-clip" v-if="updatedMovieClipList.length > 0">
    <div class="title">视频</div>
    <div class="all" @click="gotoAllVideo(updatedMovieClipList[0].id)">全部<van-icon name="arrow" /></div>
  </div>

  <div class="swipe">
    <ul class="videos">
      <li v-for="clip in updatedMovieClipList" :key="clip.id">
        <img class="thumb" :src="clip.video.imgUrl" @click="gotoPreview(clip.id)" />
        <van-icon name="play-circle-o" class="icon" size="30" />
      </li>
    </ul>
  </div>
</template>

<script setup>
import { updateVideoGalleryImageUrl } from '@/tools/index.js'
import { computed } from 'vue'

import { useStore } from '@/stores/index.js'
const store = useStore()

import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  movieClipList: {
    type: Array,
    default: () => [],
  },
})

const movieId = computed(() => {
  return store.movieDetailPage.movieInfo.id
})

const updatedMovieClipList = computed(() => {
  return props.movieClipList.map((clip) => ({
    ...clip,
    video: {
      ...clip.video,
      imgUrl: updateVideoGalleryImageUrl(clip.video.imgUrl),
    },
  }))
})

const gotoPreview = (id) => {
  router.push({ path: `/movie/${movieId.value}/preview`, query: { videoId: id } })
};

const gotoAllVideo = (id) => {
  router.push({ path: `/movie/${movieId.value}/preview`, query: { videoId: id } })
}

</script>

<style scoped>
.movie-clip {
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.movie-clip .title {
  font-size: 15px;
}

.movie-clip .all {
  cursor: pointer;
  font-size: 12px;
}

.swipe {
  margin-top: 10px;
}

.videos {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE 和 Edge  隐藏滚动条 */
  scrollbar-width: none;
  /* Firefox 隐藏滚动条*/
}

.videos::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera 隐藏滚动条 */
}

.videos li {
  margin-right: 10px;
  text-align: center;
  position: relative;
  /* width: 80px; */
  /* height: 112px; */
}

.videos li .thumb {
  cursor: pointer;
  width: 140px;
  height: 93px;
  position: relative;
}

.videos li .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
</style>
